import React from "react";
import PropTypes from "prop-types";
import cx from "classnames";
import { isEmpty, merge } from "lodash";
import Dropdown from "antd/lib/dropdown";
import Modal from "antd/lib/modal";
import Menu from "antd/lib/menu";
import recordEvent from "@/services/recordEvent";
import { Moment } from "@/components/proptypes";
import { policy } from "@/services/policy";

import "./Widget.less";

function WidgetDropdownButton({ extraOptions, showUpdateOption, onUpdate, showDeleteOption, onDelete, widget }) {
  const showPortal = window.location.search.includes("show_portal") && localStorage.getItem('colorstyle_mode');
  const WidgetMenu = (
    <Menu data-test="WidgetDropdownButtonMenu">
      {extraOptions}
      {!showPortal && (showDeleteOption || showUpdateOption) && !isEmpty(extraOptions) && <Menu.Divider />}
      {!showPortal && showDeleteOption && <Menu.Item onClick={onDelete}>从报表中移除</Menu.Item>}
      {!showPortal && showDeleteOption && showUpdateOption && <Menu.Divider />}
      {!showPortal && showUpdateOption && <Menu.Item onClick={()=>onUpdate(widget)}>部件属性</Menu.Item>}
    </Menu>
  );

  return (
    <div className="widget-menu-regular">
      <Dropdown overlay={WidgetMenu} placement="bottomRight" trigger={["click"]}>
        <a className="action p-l-15 p-r-15" data-test="WidgetDropdownButton">
          <i className="zmdi zmdi-more-vert" />
        </a>
      </Dropdown>
    </div>
  );
}

WidgetDropdownButton.propTypes = {
  extraOptions: PropTypes.node,
  showUpdateOption: PropTypes.bool,
  onUpdate: PropTypes.func,
  showDeleteOption: PropTypes.bool,
  onDelete: PropTypes.func,
};

WidgetDropdownButton.defaultProps = {
  extraOptions: null,
  showUpdateOption: false,
  onUpdate: () => {},
  showDeleteOption: false,
  onDelete: () => {},
};

// function WidgetDeleteButton({ onClick }) {
//   return (
//     <div className="widget-menu-remove">
//       <a className="action" title="从报表中移除" onClick={onClick} data-test="WidgetDeleteButton">
//         <i className="zmdi zmdi-close" />
//       </a>
//     </div>
//   );
// }

// WidgetDeleteButton.propTypes = { onClick: PropTypes.func };
// WidgetDeleteButton.defaultProps = { onClick: () => {} };

class Widget extends React.Component {
  static propTypes = {
    widget: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
    className: PropTypes.string,
    children: PropTypes.node,
    header: PropTypes.node,
    footer: PropTypes.node,
    canEdit: PropTypes.bool,
    isPublic: PropTypes.bool,
    refreshStartedAt: Moment,
    menuOptions: PropTypes.node,
    tileProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
    onDelete: PropTypes.func,
    widgetRadius: PropTypes.number,
    isContainer: PropTypes.bool,
  };

  static defaultProps = {
    className: "",
    children: null,
    header: null,
    footer: null,
    canEdit: false,
    isPublic: false,
    refreshStartedAt: null,
    menuOptions: null,
    tileProps: {},
    onDelete: () => {},
    widgetRadius: -1,
    isContainer: false,
  };

  componentDidMount() {
    const { widget } = this.props;
    recordEvent("view", "widget", widget.id);
  }

  deleteWidget = () => {
    const { widget, onDelete } = this.props;

    Modal.confirm({
      title: "删除部件",
      content: "确定要从报表中移除该部件吗？",
      cancelText: "取消",
      okText: "删除",
      okType: "danger",
      onOk: () => widget.delete().then(onDelete),
      maskClosable: true,
      autoFocusButton: null,
    });
  };

  // overWidget = (e) => {
  //   e.style.boxShadow = "10px 10px 5px #888888";
  // };

  // outWidget = (e) => {
  //   e.style.boxShadow = "";
  // };

  render() {
    const { className, children, header, footer, canEdit, menuOptions, tileProps, 
      showPopButton, onExpand, widget, dashboardOptions, 
      widgetMargins, widgetRadius, isContainer 
    } = this.props;
    const showPortal = window.location.search.includes("show_portal") && localStorage.getItem('colorstyle_mode');
    const portalstyle = showPortal ? localStorage.getItem('colorstyle_mode') : 'portal';
    const hideDropdownButton = (!canEdit || isContainer || showPortal) && (!!widget.getWidgetOptions("widget_nomenu") || isEmpty(menuOptions));
    const isContainerWidget = widget.getWidgetOptions("type") === 'container' ? true : false;    //是否容器
    const showUpdateOption = (widget.visualization || widget.getWidgetOptions("type")) && canEdit;
    const widgetImage = widget.getWidgetOptions("widget_bg") ? 'url(' + policy.getHost() + '/static/images/' + portalstyle + '/widgetbg.png) center/100% 100%' : widget.getWidgetOptions("widget_image"); 
    const widgetBgTransparent = widget.getWidgetOptions("widget_bgtransparent"); 

    var borderRadius = {borderRadius: widgetRadius};
    if (!isContainer || widgetRadius<0) borderRadius = {borderRadius: showPortal ? 0 : 5};
    var boxShadow = widgetMargins === 0 ? {borderWidth: 0, boxShadow: "none"} : {};
    borderRadius = merge(borderRadius, !!widgetImage && {background: widgetImage});
    borderRadius = merge(borderRadius, boxShadow);

    var showEditWidgetDialog = null;
    if (dashboardOptions) {
      switch(widget.getWidgetOptions("type")) {
        case 'weather':
          if (dashboardOptions.showEditWeatherDialog) showEditWidgetDialog = dashboardOptions.showEditWeatherDialog;
          break;
        case 'container':
          if (dashboardOptions.showEditContainerDialog) showEditWidgetDialog = dashboardOptions.showEditContainerDialog;
          break;
        case 'url':
          if (dashboardOptions.showEditUrlDialog) showEditWidgetDialog = dashboardOptions.showEditUrlDialog;
          break;
        case 'video':
          if (dashboardOptions.showEditVideoDialog) showEditWidgetDialog = dashboardOptions.showEditVideoDialog;
          break;
        default:
          if (dashboardOptions.showEditWidgetDialog) showEditWidgetDialog = dashboardOptions.showEditWidgetDialog;
      }
    }

    var widget_border = '';
    if (dashboardOptions) {
      switch(widget.getWidgetOptions("widget_border")) {
        case 'line':
          widget_border = 'url(' + policy.getHost() + '/static/images/' + portalstyle + '/line.png) repeat-x left top,url(' + policy.getHost() + '/static/images/' + portalstyle + '/line.png) repeat-x left bottom,' + 
            'url(' + policy.getHost() + '/static/images/' + portalstyle + '/line.png) repeat-y left top,url(' + policy.getHost() + '/static/images/' + portalstyle + '/line.png) repeat-y right top,';
          break;
        case 'border':
          widget_border = 'url(' + policy.getHost() + '/static/images/' + portalstyle + '/bdt.png) no-repeat left top,url(' + policy.getHost() + '/static/images/' + portalstyle + '/bdl.png) no-repeat left bottom,' + 
            'url(' + policy.getHost() + '/static/images/' + portalstyle + '/bdr.png) no-repeat right top,url(' + policy.getHost() + '/static/images/' + portalstyle + '/bdb.png) no-repeat right bottom,';
          break;
        case 'bold':
          widget_border = 'url(' + policy.getHost() + '/static/images/' + portalstyle + '/bdt.png) no-repeat left top,url(' + policy.getHost() + '/static/images/' + portalstyle + '/bdl.png) no-repeat left bottom,' + 
            'url(' + policy.getHost() + '/static/images/' + portalstyle + '/bdr.png) no-repeat right top,url(' + policy.getHost() + '/static/images/' + portalstyle + '/bdb.png) no-repeat right bottom,' + 
            'url(' + policy.getHost() + '/static/images/' + portalstyle + '/line.png) repeat-x left top,url(' + policy.getHost() + '/static/images/' + portalstyle + '/line.png) repeat-x left bottom,' + 
            'url(' + policy.getHost() + '/static/images/' + portalstyle + '/line.png) repeat-y left top,url(' + policy.getHost() + '/static/images/' + portalstyle + '/line.png) repeat-y right top,';
          break;
        case 'middle':
          widget_border = 'url(' + policy.getHost() + '/static/images/' + portalstyle + '/bdt.png) no-repeat left 20px,url(' + policy.getHost() + '/static/images/' + portalstyle + '/bdl.png) no-repeat left bottom,' + 
            'url(' + policy.getHost() + '/static/images/' + portalstyle + '/bdr.png) no-repeat right 20px,url(' + policy.getHost() + '/static/images/' + portalstyle + '/bdb.png) no-repeat right bottom,' +
            'url(' + policy.getHost() + '/static/images/' + portalstyle + '/line.png) repeat-x left 20px,url(' + policy.getHost() + '/static/images/' + portalstyle + '/line.png) repeat-x left bottom,' + 
            'url(' + policy.getHost() + '/static/images/' + portalstyle + '/line.png) no-repeat left 20px,url(' + policy.getHost() + '/static/images/' + portalstyle + '/line.png) no-repeat right 20px,';
          break;
        case 'cloud':
          widget_border = 'url(' + policy.getHost() + '/static/images/' + portalstyle + '/ct.png) no-repeat left top,url(' + policy.getHost() + '/static/images/' + portalstyle + '/cl.png) no-repeat left bottom,' + 
            'url(' + policy.getHost() + '/static/images/' + portalstyle + '/cr.png) no-repeat right top,url(' + policy.getHost() + '/static/images/' + portalstyle + '/cb.png) no-repeat right bottom,';
          break;
        case 'linecloud':
          widget_border = 'url(' + policy.getHost() + '/static/images/' + portalstyle + '/ct.png) no-repeat left top,url(' + policy.getHost() + '/static/images/' + portalstyle + '/cl.png) no-repeat left bottom,' + 
            'url(' + policy.getHost() + '/static/images/' + portalstyle + '/cr.png) no-repeat right top,url(' + policy.getHost() + '/static/images/' + portalstyle + '/cb.png) no-repeat right bottom,' +
            'url(' + policy.getHost() + '/static/images/' + portalstyle + '/line.png) repeat-x left top,url(' + policy.getHost() + '/static/images/' + portalstyle + '/line.png) repeat-x left bottom,' + 
            'url(' + policy.getHost() + '/static/images/' + portalstyle + '/line.png) repeat-y left top,url(' + policy.getHost() + '/static/images/' + portalstyle + '/line.png) repeat-y right top,';
          break;
        default:
          widget_border = '';
      }
    }

    return (
      <div className={!!widget.getWidgetOptions("pop_widget") ? "widget-wrapper-click" : "widget-wrapper"}>
        <div className={cx("tile body-container", className)} {...tileProps} 
          style={showPortal ? {
              background: (isContainer || widgetBgTransparent) ? widget_border + "transparent" : widget_border + localStorage.getItem('colorstyle_back'),
              color: localStorage.getItem('colorstyle_color'), ...borderRadius
            } : { ...borderRadius }
          } 
        >
          <div className="widget-actions" style={{zIndex: 999}}>
          {showPopButton && !widget.getWidgetOptions("pop_widget") && (
            <span>
              <a className="widget-menu-regular action p-l-5 p-r-5"  title={widget.getWidgetOptions("pop_title")} onClick={onExpand}>
                <i className={!!widget.getWidgetOptions("pop_icon") ? (widget.getWidgetOptions("pop_icon").includes("zmdi-") ? "zmdi " + widget.getWidgetOptions("pop_icon") : "fa " + widget.getWidgetOptions("pop_icon")) : "fa fa-cog"} />
              </a>
            </span>
          )}
          {!(isContainerWidget && showPortal) && !hideDropdownButton && (
              <WidgetDropdownButton
                extraOptions={menuOptions}
              showUpdateOption={isContainer ? undefined : showUpdateOption}
              onUpdate={isContainer ? {} : showEditWidgetDialog}
              showDeleteOption={isContainer ? false : canEdit}
              onDelete={isContainer ? {} : this.deleteWidget}
              widget={widget}
              />
            )}
          </div>
          <div className="body-row widget-header" 
            style={showPortal ? {background: '#00000000', ...boxShadow} : boxShadow}
            onClick={showPortal && !!widget.getWidgetOptions("pop_widget") && onExpand}
          >{header}</div>
          {children}
          {footer && <div className="body-row tile__bottom-control" 
            style={showPortal ? {color: localStorage.getItem('colorstyle_color')} : null}
            onClick={showPortal && !!widget.getWidgetOptions("pop_widget") && onExpand}
          >{footer}</div>}
        </div>
      </div>
    );
  }
}

export default Widget;
